<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <!-- 引入jquery -->
    <script src='../day14/jquery.js'></script>
    <!-- 引入momentjs（处理时间） -->
    <script src='../day09/moment.js'></script>
    <style>
        body {
            margin: 0;
        }
        .main {
            padding:1em
        }
        .btn {
            width: 60px;
            height: 30px;
            border-radius: 8px;
            background-color: blueviolet;
            color:#fff;
            text-align:center;
            line-height: 30px;
            margin-bottom: 2em;
        }
        .wrap {
            width: 100%;
            min-height:720px;
            background-color: rgba(0,0,0,0.5);
            position:absolute;
            top: 0;
            display:none
        }
        .wrap .dilog {
            width:700px;
            min-height:600px;
            background-color: #fff;
            position:absolute;
            left: 50%;
            margin-left: -350px;
            top: 5em;
            border-radius: 5px;
            padding: .5em 1em;
        }
        .wrap .dilog .form {
            width:80%;
            min-height: 330px;
            /* background-color: aqua; */
            margin: 0 auto;
            margin-top: 2em;
        }
        input {
            width:460px;
            margin-bottom: 1em;
        }
        .wrap .dilog .footer .cancel {
            float: right;
            width: 60px;
            height: 30px;
            border-radius: 8px;
            background-color: blueviolet;
            color:#fff;
            text-align:center;
            line-height: 30px;
        }
        .wrap .dilog .footer .submit {
            float: right;
            width: 60px;
            height: 30px;
            border-radius: 8px;
            background-color: blueviolet;
            color:#fff;
            text-align:center;
            line-height: 30px;
            margin-right: 1em;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 1.静态页面的重构 -->
        <!-- 按钮开始 -->
        <div class="btn" onclick='toAdd()'>新增</div>
        <!-- 按钮结束 -->
        <!-- 表格开始 -->
        <table border=1 width="100%">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>联系方式</th>
                    <th>出生日期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>admin1</td>
                    <td>admin1</td>
                    <td>18139978311</td>
                    <td>2020-9-10</td>
                    <td>正常</td>
                    <td>
                        <span onclick="deleteHandler(this)">删除</span>
                        <span onclick="editHandler(this)">编辑</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 表格结束 -->
    </div>
    <!-- 新增模态框开始 -->
        <div id="add" class="wrap">
            <div class="dilog">
                <p id='title'>新增用户</p>
                <div class="form">
                    <table>
                        <tr>
                            <td>用户名：</td>
                            <td><input type="text" id="username"></td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td><input type="password" id="password"></td>
                        </tr>
                        <tr>
                            <td>真实姓名：</td>
                            <td><input type="text" id='realname'></td>
                        </tr>
                        <tr>
                            <td>联系方式：</td>
                            <td><input type="text" id='telephone'></td>
                        </tr>
                        <tr>
                            <td>出生日期：</td>
                            <td><input type="text" id='birth'></td>
                        </tr>
                        <tr>
                            <td>状态：</td>
                            <td><input type="text" id='status'></td>
                        </tr>
                    </table>
                </div>
                <div class="footer">
                    <div class="cancel" onclick="cancelHandler()">取消</div>
                    <div class="submit" onclick="submitHandler()">确定</div>
                </div>
            </div>
        </div>
    <!-- 新增模态框结束 -->
    <!-- 编辑模态框开始 -->
    <div id="edit" class="wrap">
        <div class="dilog">
            <p id='title'>编辑用户</p>
            <div class="form">
                <table>
                    <tr>
                        <td>用户名：</td>
                        <input id='eid' type="hidden">
                        <td><input type="text" id="eusername"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="password" id="epassword"></td>
                    </tr>
                    <tr>
                        <td>联系方式：</td>
                        <td><input type="text" id='etelephone'></td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td><input type="text" id='ebirth'></td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td><input type="text" id='estatus'></td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <div class="cancel" onclick="editCancelHandler()">取消</div>
                <div class="submit" onclick="editSubmitHandler()">确定</div>
            </div>
        </div>
    </div>
    <!-- 编辑模态框结束 -->
</body>
<script>
    $.ajaxSetup({
        headers: {'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzE2MDcyMzUsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjMxNzgwMDM1LCJuYmYiOjE2MzE2MDcyMzV9.xLc4_6A1hBob8HpXW03Lc7T5Uw94n4quk3QuKtNSFFs'}
    })
    //2.数据对接（使用工具ajax与后台进行数据交互）
    var baseUrl = 'http://47.93.206.13:8002'
    //查询所有用户信息
    function findAllUser(){
        //异步交互
        $.get(baseUrl+'/baseUser/cascadeRoleFindAll',function(data){
            // console.log(data);
            if(data.status == 200){
                var res = data.data
                //遍历数据
                res.forEach(function(item){
                    //1.克隆tr
                    var newTr = $('.main table tbody tr:first').clone(true)
                    //2.给每个td赋值
                    newTr.children('td').eq(0).html(item.id)
                    newTr.children('td').eq(1).html(item.username)
                    newTr.children('td').eq(2).html(item.password)
                    newTr.children('td').eq(3).html(item.telephone)
                    newTr.children('td').eq(4).html(item.birth)
                    newTr.children('td').eq(5).html(item.status)
                    //3.将克隆出来的tr追加到tbody中
                    $('.main table tbody').append(newTr)
                })
                //删除模拟数据
                $('.main table tbody tr').filter(function(index){
                    return index == 0
                }).remove()
            }else {
                alert(data.message);
            }
        })
    }
    findAllUser()
    //打开模态框，去添加用户信息
    function toAdd(){
        $('#add').css({'display':'block'})
    }
    //取消按钮，关闭模态框
    function cancelHandler(){
        $('.wrap').css({'display':'none'})
    }
    //提交
    function submitHandler(){
        //获取用户输入的信息
        var form = {
            username:$('#username').val(),
            password:$('#password').val(),
            realname:$('#realname').val(),
            telephone:$('#telephone').val(),
            birth:$('#birth').val(),
            status:$('#status').val()
        }
        // console.log(form);
        //异步交互
        $.post(baseUrl+'/baseUser/saveOrUpdate',form,function(res){
            if(res.status == 200){
                //关闭模态框
                $('.wrap').css({'display':'none'})
                //给用户提示信息
                alert(res.message)
                //刷新页面
                findAllUser()
            }else {
                alert(res.message)
            }
        })
    }
    //删除用户信息
    function deleteHandler(row){
        //row => span  获取当前行的id值，tr的第一个td中
        // console.log(row.parentNode.parentNode.childNodes[1].innerText);
        var id = row.parentNode.parentNode.childNodes[1].innerText

        var rmRow  = row.parentNode.parentNode
        //异步交互
        $.get(baseUrl+'/baseUser/deleteById?id='+id,function(res) {
            if(res.status == 200){
                //提示信息
                // alert(res.message)
                //刷新页面
                // findAllUser()
                $(rmRow).remove()
            }else {
                alert(res.message)
            }
        })
    }
    //编辑操作
    function editHandler(dom){
        //使用有没有id值来区分，是保存操作，还是编辑操作
        //保存操作，不需要传递id值
        //编辑操作，需要传递id值
        var id = dom.parentNode.parentNode.firstElementChild.innerText
        $('#edit').css({'display': 'block'});
        $('#eid').val(id)
        $('#eusername').val(dom.parentNode.parentNode.children[1].innerText)
        $('#epassword').val(dom.parentNode.parentNode.children[2].innerText)
        $('#etelephone').val(dom.parentNode.parentNode.children[3].innerText)
        $('#ebrith').val(dom.parentNode.parentNode.children[4].innerText)
        $('#estatus').val(dom.parentNode.parentNode.children[5].innerText)
    }
    //编辑取消按钮
    function editCancelHandler(){
        $('#edit').css({'display': 'none'});
    }
    //编辑提交按钮
    function editSubmitHandler(){
        //获取用户输入的信息
        var form = {
            id:$('#eid').val(),
            username:$('#eusername').val(),
            password:$('#epassword').val(),
            telephone:$('#etelephone').val(),
            birth:$('#ebirth').val(),
            status:$('#estatus').val()
        }
        // console.log(form);
        //异步交互
        $.post(baseUrl+'/baseUser/saveOrUpdate',form,function(res){
            if(res.status == 200){
                //关闭模态框
                $('.wrap').css({'display':'none'})
                //给用户提示信息
                alert(res.message)
                //刷新页面
                findAllUser()
            }else {
                alert(res.message)
            }
        })
    }
</script>
</html>